<template>
    <div class="heart">
      <el-breadcrumb separator="">
        <el-breadcrumb-item :to="{ path: '/dataReport' }">数据报表</el-breadcrumb-item>
        <el-breadcrumb-item
        ><a></a></el-breadcrumb-item
      >
      </el-breadcrumb>
      <div class="search">
        <div style="width: 240px">
            <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
          <el-select
            v-model="timeScale"
            placeholder="Select"
            size="large"
            style="width: 240px"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        <el-button type="primary" style="width: 80px;" @click="search">查询</el-button>
      </div>
      <el-card style="height: 70px; margin-top: 20px; position:relative;" shadow="hover">
        <div style="position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%)">
            <el-radio-group v-model="dataType">
                <el-radio value="1" size="large">废气排扣</el-radio>
                <el-radio value="2" size="large">废水排扣</el-radio>
                <el-radio value="3" size="large">排污数据</el-radio>
                <el-radio value="4" size="large">用电检测数据</el-radio>
                <el-radio value="5" size="large">震动监测数据</el-radio>
              </el-radio-group>
        </div>
      </el-card>
      <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      @sort-change="handleSort"
    >
      <el-table-column label="创建日期" sortable >
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column  label="PH值">
        <el-table-column prop="phAverage" label="日均值(mg/l)" />
      </el-table-column>
      <el-table-column  label="化学需氧量">
        <el-table-column prop="chemistryAverage" label="日均值(mg/l)" />
        <el-table-column prop="chemistryOutput" label="日排量(千克)" />
      </el-table-column>
      <el-table-column  label="瞬时流量">
        <el-table-column prop="instantAverage" label="日均值(L/S)" />
      <el-table-column prop="instantOutput" label="日排量(m3)" />
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination v-model:page="page"  :total="total" @pagination="getData" />
    </div>
    </div>
      
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  import Pagination from '../components/Pagination.vue'
    let timeRange =  ref('')
    let timeScale = ref(1)
    let dataType = ref(1)
    const options = [
  {
    value: 1,
    label: '每月数据',
  },
  {
    value: 2,
    label: '每天数据',
  },
  {
    value: 3,
    label: '小时数据',
  },
]
    onMounted(()=>{
      console.log(tableData.value)
    })
    const tableData = ref([
      {
          "id":1,
          "phAverage": "6",
          "chemistryAverage": "15",
          "chemistryOutput": "1045",
          "instantAverage": "27",
          "instantOutput": "2654",
          "createTime": "2024-05-08",
        },
        {
          "id":2,
          "phAverage": "7",
          "chemistryAverage": "16",
          "chemistryOutput": "1534",
          "instantAverage": "25",
          "instantOutput": "2764",
          "createTime": "2024-05-07",
        },
        {
          "id":3,
          "phAverage": "6",
          "chemistryAverage": "14",
          "chemistryOutput": "1432",
          "instantAverage": "23",
          "instantOutput": "2653",
          "createTime": "2024-05-06",
        },
        {
          "id":4,
          "phAverage": "8",
          "chemistryAverage": "13",
          "chemistryOutput": "1453",
          "instantAverage": "25",
          "instantOutput": "2865",
          "createTime": "2024-05-05",
        },
        {
          "id":5,
          "phAverage": "7",
          "chemistryAverage": "12",
          "chemistryOutput": "1435",
          "instantAverage": "26",
          "instantOutput": "2543",
          "createTime": "2024-05-04",
        },
        {
          "id":6,
          "phAverage": "6",
          "chemistryAverage": "15",
          "chemistryOutput": "1564",
          "instantAverage": "27",
          "instantOutput": "2534",
          "createTime": "2024-05-03",
        },
        {
          "id":7,
          "phAverage": "5",
          "chemistryAverage": "16",
          "chemistryOutput": "1523",
          "instantAverage": "25",
          "instantOutput": "2563",
          "createTime": "2024-05-02",
        },
        {
          "id":8,
          "phAverage": "7",
          "chemistryAverage": "17",
          "chemistryOutput": "1521",
          "instantAverage": "25",
          "instantOutput": "2543",
          "createTime": "2024-05-01",
        },
        {
          "id":9,
          "phAverage": "8",
          "chemistryAverage": "18",
          "chemistryOutput": "1654",
          "instantAverage": "26",
          "instantOutput": "2566",
          "createTime": "2024-04-06",
        },
        {
          "id":10,
          "phAverage": "9",
          "chemistryAverage": "19",
          "chemistryOutput": "1542",
          "instantAverage": "23",
          "instantOutput": "2867",
          "createTime": "2024-04-06",
        },
    ])
    interface Instrument {
      id: number,
      companyName: string,
      outputName: string,
      instrumentName: string,
      instrumentMIN: string,
      password: string,
      isUsing: boolean
    }
    let selected = ref<number[]>([])
    const handleSelectionChange = (a:Instrument[])=>{
      selected.value = [];
      a.forEach((row:Instrument)=>{
        selected.value.push(row.id)
      })
      console.log(selected.value)
    }
  
    let handleSort = (data: {column: any, prop: string, order: any })=>{
      console.log(data)
    }
    let currentPage = ref(1)
    let pageSize = ref(10)
    let total = ref(100)
    let page = ref(1)
    let search = ()=>{
      
    }
  </script>
  <style>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
  </style>